<template>
  <div class="page">
    <el-container  class="wrapper">
      <el-aside :width="menuCollapse?'':'200px'" class="wrapper-left">
        <left-sidebar :menuCollapse ="menuCollapse"></left-sidebar>
      </el-aside>
      <el-container class="wrapper-right">
        <el-header>
           <v-header  @changeStatus="changeStatus"></v-header>
        </el-header>
        <el-main class="page-content">
          <router-view></router-view>
        </el-main>
        <websocket></websocket>
      </el-container>
  </el-container>
  
  </div>
</template>
<script>
import vHeader from 'components/Header.vue'
import LeftSidebar from 'components/leftSidebar.vue'
import websocket from './websocket'
export default {
  components:{
    vHeader,
    LeftSidebar,
    websocket
  },
  data (){
    return {
       menuCollapse:false
    }
  },
  methods:{
    changeStatus(status){
      this.menuCollapse=status;
    }
  }
}
</script>
<style lang="stylus" scoped>
.page
  height 100%
  width 100%
  .wrapper
    height 100%
    width 100%
    position relative
    overflow hidden
    .wrapper-left
    .wrapper-right
      float left
      height 100%
      .el-header
        background #fff
  .page-content
    background #eff3f5
</style>
